<template>
  <div>
    <el-dialog v-if="enable" :visible.sync="enable" title="管理配置" :close-on-click-modal="false">
        <el-tabs value="logs" tab-position="top" @tab-click="actionHandleConfigTabClicked">
          <el-tab-pane label="日志" name="logs">
            <el-form ref="form">
              <el-form-item>
                <el-row :gutter="10" v-for="(item, index) in logs" :key="index">
                  <el-col class="mt-1" :span="5"><el-input disabled :value="item.name"></el-input></el-col>
                  <el-col class="mt-1" :span="16"><el-input disabled :value="item.file"></el-input></el-col>
                  <el-col class="mt-1" :span="3">
                    <el-button @click="actionLogEntryDelete(index)">删除</el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col class="mt-1" :span="5"><el-input v-model="logEntry.name"></el-input></el-col>
                  <el-col class="mt-1" :span="16"><el-input v-model="logEntry.file"></el-input></el-col>
                  <el-col class="mt-1" :span="3">
                    <el-button @click="actionLogEntryAdd">添加</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="更新脚本" name="deployment-update">
            <codemirror ref="editorDeployUpdate" v-model="deployUpdate" :options="deployEditorOptions" class="code"></codemirror>
          </el-tab-pane>
          <el-tab-pane label="回滚脚本" name="deployment-rollback">
            <codemirror ref="editorDeployRollback" v-model="deployRollback" :options="deployEditorOptions" class="code"></codemirror>
          </el-tab-pane>
        </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="enable = false">取 消</el-button>
        <el-button type="primary" @click="actionSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css";
import "codemirror/mode/shell/shell.js";
import Common from '../../utils/Common.js'
export default {
    name : 'ApacheDialogVirtualHostManagementConfig',
    components : {
        codemirror,
    },
    data() {
        return {
            enable : false,
            sitename : null,
            website : {},
            logs : [],
            logEntry : {},
            deployUpdate : '',
            deployRollback : '',
            deployEditorOptions : {
                mode:'shell',
                theme: 'ambiance',
                readOnly:false,
                lineNumbers:true,
                lineWrapping:true,
                autofocus:true,
            },
        };
    },
    methods : {
        /** */
        async open( sitename ) {
            this.deployRollback = '';
            this.deployUpdate = '';
            this.logs = [];
            this.website = {};
            this.sitename = sitename;
            
            let server = this.$store.getters.serverCurrent;
            let localConfigPath = server.localGetPath(`/websites/${this.sitename}.json`);
            if ( await Common.isFileExists(localConfigPath) ) {
                let content = await Common.fileGetContent(localConfigPath);
                this.website = JSON.parse(content);
                this.logs = this.website.logs;
                this.deployUpdate = this.website.deployUpdate;
                this.deployRollback = this.website.deployRollback;
            }

            this.enable = true;
        },

        /** 保存配置 */
        async actionSave() {
            this.website.logs = this.logs;
            this.website.deployUpdate = this.deployUpdate;
            this.website.deployRollback = this.deployRollback;
            let content = JSON.stringify(this.website, null, 2);

            let server = this.$store.getters.serverCurrent;
            let localConfigPath = server.localGetPath(`/websites`);
            await Common.dirCreateIfNotExists(localConfigPath);

            localConfigPath = server.localGetPath(`/websites/${this.sitename}.json`);
            await Common.filePutContent(localConfigPath, content);
            this.$emit('update');
            this.enable = false;
        },

        // tab 标签被点击
        actionHandleConfigTabClicked( tab ) {
            let $this = this;
            if ( 'deployment-update' == tab.name ) {
                setTimeout(function() {
                    $this.$refs.editorDeployUpdate.codemirror.refresh();
                    $this.$refs.editorDeployUpdate.codemirror.focus();
                }, 50);
            } else if ( 'deployment-rollback' == tab.name ) {
                setTimeout(function() {
                    $this.$refs.editorDeployRollback.codemirror.refresh();
                    $this.$refs.editorDeployRollback.codemirror.focus();
                }, 50);
            }
        },

        // 添加日志条目
        actionLogEntryAdd() {
            this.logs.push({
                name : this.logEntry.name, 
                file : this.logEntry.file,
            });
            this.logEntry = {};
        },

        // 删除日志条目
        actionLogEntryDelete(index) {
            this.logs.splice(index, 1);
        },
    },
}
</script>